<template>
  <div class="hello">
    <!--图表的容器 -->
    <div ref="chartContainer" class="chartContainer"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

import dayjs from "dayjs";
import { KEY, API_24H } from "@/common/constrants";
import { mapActions, mapState } from 'vuex';

export default {
  name: "HelloWorld",
  // data() {
  //   return {
  //     hourly: [],
  //     hourlyWeatherData: {
  //       fxTime: [], // x轴数据
  //       temp: [], // seriseData
  //     },
  //   };
  // },
  computed:{
    ...mapState([
      "location",
      "hour24"
    ])
  },
  watch:{
    location:function(){
      console.log("-------------")
      this.getData();
    }
  },
  created() {
    this.getData();
  },
  
  methods: {
    ...mapActions([
      'updateLocation24Action'
    ]),
    getData() {
      axios
        .get(API_24H, {
          params: {
            key: KEY,
            location: this.location.id, // 等价 = this.$store.store.location.id
          },
        })
        .then((res) => {
          // console.log(res.data);
          // this.hourly = res.data.hourly;
          let hour24Data = {
            fxTime: [], // x轴数据
            temp: [], // seriseData
          }
          res.data.hourly.forEach((element) => {
            // this.hour24.fxTime.push(element.fxTime);
            // this.hour24.temp.push(element.temp);
            hour24Data.fxTime.push(element.fxTime);
            hour24Data.temp.push(element.temp);
          });
          // 当24小时前的数据做了变化之后，需要更新到state
          this.updateLocation24Action(hour24Data) //等价 = this.$store.dispatch('updateLocation24Action',hour24Data)
          
          


          // console.log(this.hourlyWeatherData.fxTime)
          // console.log( this.hourlyWeatherData.temp)
          // console.log(dayjs(this.hourlyWeatherData.fxTime).format())
          /**
           * 1. Array.map方法
           * 2. 箭头函数
           */
          // 写法 1
          // let array = this.hourlyWeatherData.fxTime.map((date) =>{
          //  return dayjs(date).format("HH")
          // })
          // 写法2
          //  let array = this.hourlyWeatherData.fxTime.map((date) => dayjs(date).format("HH"))
          // console.log(this.hourlyWeatherData.fxTime)
          //  console.log(array)

          this.initChart(
            // this.hourlyWeatherData.fxTime,
            this.hour24.fxTime.map((date) =>
              dayjs(date).format("HH")
            ),
            this.hour24.temp
          );
        });
    },
    // 初始化图表
    initChart(xAxisData, seriesData) {
      var chartDom = this.$refs.chartContainer;
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: seriesData,
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chartContainer {
  height: 200px;
}
</style>
